<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">

    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">总面积</span>
          <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-template-1"></i><span style="margin-left: 70px;color: #05aaaa;">433</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">㎡</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">绿化面积</span>
          <span class="layui-badge layui-bg-green layuiadmin-badge">绿</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-template-1"></i><span style="margin-left: 70px;color: #05aaaa;">335</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">㎡</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">土建面积</span>
          <span class="layui-badge layui-bg-cyan layuiadmin-badge">土</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-template-1"></i><span style="margin-left: 70px;color: #05aaaa;">147</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">㎡</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">养护数量</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">养</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-username"></i><span style="margin-left: 70px;color: #05aaaa;">16</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">次</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">巡查数量</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">巡</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-username"></i><span style="margin-left: 70px;color: #05aaaa;">43</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">次</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">病虫数量</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">虫</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-username"></i><span style="margin-left: 70px;color: #05aaaa;">64</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">次</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm12">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">精细养护统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">日常养护统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container1" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm12">
          <div class="layui-col-sm6">
            <div class="layui-card">
              <div class="layui-card-header">病虫害当年逐月统计</div>
              <div class="layui-card-body">
                <table class="layui-table" lay-skin="line">
                  <tbody>
                  <tr>
                    <td >
                      <div id="container2" style="width:100%; height:300px"></div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="layui-col-sm6">
            <div class="layui-card">
              <div class="layui-card-header">巡查次数逐月统计</div>
              <div class="layui-card-body">
                <table class="layui-table" lay-skin="line">
                  <tbody>
                  <tr>
                    <td >
                      <div id="container0" style="width:100%; height:300px"></div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">健康异常逐月统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container3" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">缺勤人数逐月统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container4" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
  <%include("/common/foot.html"){}%>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script>
    //饼图（精细养护）
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      color:['#60acfc','#5bc49f','#ff7c7c','#9287e7'],
      title: {
        text: '精细养护分类占比',
        subtext: '四大分类',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['绿地养护', '卫生清理', '设施维护', '植保管理']
      },
      series: [
        {
          name: '精细养护分类',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {value: 22, name: '绿地养护'},
            {value: 12, name: '卫生清理'},
            {value: 14, name: '设施维护'},
            {value: 12, name: '植保管理'},

          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
    //////////////////////////////////////////////////////
    //饼图（日常养护）
    //////////////////////////////////////////////////////
    //饼图（日常养护）
    var dom = document.getElementById("container1");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      color:['#feb64d','#9287e7','#5bc49f','#60acfc','#32d3eb'],
      title: {
        text: '日常养护分类占比',
        subtext: '五大常用分类',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['中耕除草', '签到打卡', '施肥', '复壮','花后修剪']
      },
      series: [
        {
          name: '日常养护分类',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {value: 22, name: '中耕除草'},
            {value: 12, name: '签到打卡'},
            {value: 14, name: '施肥'},
            {value: 12, name: '复壮'},
            {value: 17, name: '花后修剪'},

          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    if (option && typeof option === "object") {

      myChart.setOption(option, true);

    }
    //////////////////////////////////////////////////////
    //柱图（巡查逐月）
    var dom = document.getElementById("container2");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      title: {
        text: '病虫害当年逐月统计',
        subtext: '虫害/病害'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['虫害', '病害']
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '虫害',
          type: 'bar',
          color:'#60ACFC',
          data: [12, 9, 22, 18, 19, 8, 30, 25, 21, 23, 18, 19],
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        },
        {
          name: '病害',
          type: 'bar',
          color:'#AFE39B',
          data: [1, 3, 1, 4, 3, 5, 1, 1, 1, 1, 2, 1],
          markPoint: {
            data: [
              {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
              {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '25%',
        containLabel: true
      }
    };
    if (option && typeof option === "object") {

      myChart.setOption(option, true);
    }
    //柱图（巡查逐月）
    var dom = document.getElementById("container0");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      title: {
        text: '巡查次数逐月统计',
        subtext: '已完成/未完成'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['已完成', '未完成']
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '已完成',
          type: 'bar',
          color:'#60ACFC',
          data: [12, 9, 22, 18, 19, 8, 30, 25, 21, 23, 18, 19],
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        },
        {
          name: '未完成',
          type: 'bar',
          color:'#AFE39B',
          data: [1, 3, 1, 4, 3, 5, 1, 1, 1, 1, 2, 1],
          markPoint: {
            data: [
              {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
              {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '25%',
        containLabel: true
      }
    };
    if (option && typeof option === "object") {

      myChart.setOption(option, true);
    }
    //////////////////////////////////////////////////////
    //折线图（健康异常）
    var dom = document.getElementById("container3");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      title: {
        text: '健康异常逐月统计',
        subtext: '异常'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['异常']
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '异常',
          type: 'bar',
          color:'#60ACFC',
          data: [12, 9, 22, 18, 19, 8, 30, 25, 21, 23, 18, 19],
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '25%',
        containLabel: true
      }
    };
    if (option && typeof option === "object") {

      myChart.setOption(option, true);
    }
    //////////////////////////////////////////////////////
    //折线图（缺勤人数）
    var dom = document.getElementById("container4");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      title: {
        text: '缺勤人数逐月统计',
        subtext: '人'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['考勤']
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '考勤',
          type: 'bar',
          color:'#60ACFC',
          data: [12, 9, 22, 18, 19, 8, 30, 25, 21, 23, 18, 19],
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '25%',
        containLabel: true
      }
    };
    if (option && typeof option === "object") {

      myChart.setOption(option, true);
    }
    //////////////////////////////////////////////////////
    //柱图（用水量）
    var dom = document.getElementById("container5");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      title: {
        text: '逐日用水量柱状图',
        subtext: '当月',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10',
          '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20',
          '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30',
          '01-31']
      },
      yAxis: {
        name: '用水量/吨',
        type: 'value'
      },
      series: [{
        name: '用水量',
        data: [12, 20, 15, 8, 7, 11, 13],
        type: 'bar',
        markPoint: {
          data: [
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
          ]
        },
        markLine: {
          data: [
            {type: 'average', name: '平均值'}
          ]
        }
      }],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '25%',
        containLabel: true
      }
    };
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
</body>
</html>